<template>
  <div
    class="el-vue-search-box-container"
    @keydown.up="selectTip('up')"
    @keydown.down="selectTip('down')"
  >
    <div class="search-box-wrapper">
      <input
        type="text"
        v-model="keyword"
        @keyup.enter="search"
        @focus="showTips"
        @input="autoComplete"
      />
      <span class="search-btn" @click="search">搜索</span>
    </div>
    <div class="search-tips" style="max-height: 400px">
      <ul style="width: 295px" v-show="showList">
        <li
          v-for="(tip, index) in tips"
          :key="index"
          @click="changeTip(tip)"
          @mouseover="selectedTip = index"
          :title="tip.formatterAddress + tip.name"
          class="area-name"
          :class="{ 'autocomplete-selected': index === selectedTip }"
        >
          {{ tip.formatterAddress + tip.name }}
          <!--          <span class="auto-item-span">{{tip.district}}</span>-->
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.el-vue-amap-container.amap-demo {
  height: 500px;
}
.search-box-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  top: 0;
  box-sizing: border-box;
  background: #fff;
  height: 45px;
  padding-left: 10px;
  width: 360px;
  input {
    flex: 1;
  }
}

.search-box {
  position: absolute;
  top: 20px;
  left: 20px;
}
.search-tips {
  ul {
    width: 100%;
    background: #fff;
    max-height: 400px;
    overflow-y: auto;
    li {
      height: 40px;
      line-height: 40px;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      padding: 0 10px;
      cursor: pointer;
    }
  }
}
.amap-page-container {
  position: relative;
}
.el-vue-search-box-container {
  position: absolute;
  z-index: 999;
  top: 20px;
  left: 20px;
  .search-btn {
    color: #fff;
    background: #ff8889;
    width: 55px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
  }
}

.auto-item-span {
  color: #c1c1c1;
  padding-left: 4px;
}
.area-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<script>
import CTMap from "@ct/ct_map_ol";
import { keyWordQueryPoi } from "@/api/modules/eventManagement/eventMapol.js";
import { debounce } from "@/utils/common";

export default {
  name: "amap-search",
  props: [
    "searchOption",
    "setPoints",
    "events",
    "default",
    "mapInstance",
    "map",
    "mapId",
    "defaultPlace",
  ],
  data() {
    return {
      keyword: this.default || "",
      tips: [],
      selectedTip: -1,
      loaded: false,
      adcode: null,
      _placeSearch: null,
      _autoComplete: null,
      showList: false,
    };
  },
  mounted() {
    console.log(this.isMapList, "isMapList");
  },
  methods: {
    autoComplete: debounce(
      async function () {
        if (!this.keyword) {
          return;
        }
        const { data } = await keyWordQueryPoi({
          // pageNum:"1",
          // pageSize:"10",
          keyWord: this.keyword,
          queryType: "7",
          location: this.defaultPlace.join(","),
        });
        this.tips = data.list.map((item) => {
          return {
            ...item.pois[0],
            formatterAddress:
              item.region.province + item.region.city + item.region.county,
          };
        });
      },
      300,
      false
    ),
    search(tip) {
      if (this.tips.length === 0) {
        return;
      }
      let placeData;
      if (Array.isArray(tip)) {
        placeData = tip[0];
      } else {
        placeData = this.tips[0];
      }
      placeData.lon = placeData.location
        .split(",")
        .map((item) => Number(item))[0];
      placeData.lat = placeData.location
        .split(",")
        .map((item) => Number(item))[1];
      placeData.provinceCode = placeData.pCode;
      placeData.formattedAddress =
        placeData.pname +
        placeData.cityname +
        placeData.adname +
        placeData.name;
      this.$emit("update:placeData", placeData);
      this.$emit(
        "setPoints",
        CTMap.extend.formatLayer.transCoordinate(
          placeData.location.split(",").map((item) => Number(item))
        )
      );
      this.tips = [];
      // if (!this._placeSearch) return;
      // let city = null;
      // if (this.searchOption.citylimit && this.searchOption.city) {
      //   city = this.searchOption.city;
      // } else {
      //   city = this.adcode;
      // }
      // this._placeSearch.setCity(city || this.searchOption.city);
      // this._placeSearch.search({keyword: this.keyword}).then(({status, result}) => {
      //   if (result && result.poiList && result.poiList.count) {
      //     let {poiList: {pois}} = result;
      //     let LngLats = pois.map(poi => {
      //       poi.lat = poi.location.lat;
      //       poi.lng = poi.location.lng;
      //       return poi;
      //     });
      //     this._onSearchResult(LngLats);
      //   } else if (!result || result.poiList === undefined) {
      //     console.log("搜索不到结果:", result);
      //     throw new Error(result);
      //   }
      // });
    },
    changeTip(tip) {
      this.adcode = tip.adcode;
      this.keyword = tip.name;
      this.search([tip]);
    },
    selectTip(type) {
      if (type === "up" && this.selectedTip > 0) {
        this.selectedTip -= 1;
        this.keyword = this.tips[this.selectedTip].name;
        this.adcode = this.tips[this.selectedTip].adcode;
      } else if (type === "down" && this.selectedTip + 1 < this.tips.length) {
        this.selectedTip += 1;
        this.keyword = this.tips[this.selectedTip].name;
        this.adcode = this.tips[this.selectedTip].adcode;
      } else {
        console.log("解决sonar问题");
      }
    },
    hidenTips() {
      this.showList = false;
    },
    showTips() {
      this.showList = true;
    },
  },
};
</script>
